<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<title>格莱商城</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
        <script src="js/jquery.min.js"></script>
	</head>
	<body>
        <!--头部-->
        <header>
	        <div class="icon-logo logo"><a href="index.html"><span>格莱商城</span></a></div>
	        <div class="search">
			        <input type="search" name="" placeholder="">
	        </div>
	        <div class="icon-login login"><a href="my.html"><span>用户信息</span></a></div>
        </header>
		<div class="container">
        <!--banner-->
		<!--  可以自己写   也可以用插件 比如 百度一下 swiper  -->
        <div class="carousel">
	        <div class="banner-box">
		        <img src="img/banner.png"/>
		        <img src="img/banner2.png"/>
		        <img src="img/banner3.png"/>
	        </div>
            <ul class="num">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
			<!--导航栏-->
			<nav>
				<ul>
					<li class="icon-index"><a href="goods.html">热门</a></li>
					<li class="icon-boutique"><a href="#">精品</a></li>
					<li class="icon-special"><a href="#">专题</a></li>
					<li class="icon-brand"><a href="#">品牌</a></li>
				</ul>
			</nav>
			<!--正文-->
			<main>
				<!--书籍资料-->
				<div class="products">
					<div class="hd">
						<em class="icon-book">书籍资料</em>
						<span><a href="goods.html">更多 ></a></span>
					</div>
					<div class="book-list">
						<div class="left-list">
							<a href="detail.html"><img src="img/bz01.png"/></a>
							<span class="book">
								<a href="#"><img src="img/book1.png"/></a>
								<a href="#"><img src="img/book1.png"/></a>
							</span>
						</div>
						<div class="right-list">
							<a href="#"><img src="img/books.png"/></a>
						</div>
					</div>
				</div>
				<!--数码产品-->
				<div class="products">
					<div class="hd">
						<em class="icon-digital">数码产品</em>
						<span><a href="goods.html">更多 ></a></span>
					</div>
					<div class="digital-list">
						<div class="left-list">
							<a href="#"><img src="img/pc.png"/></a>
						</div>
						<div class="right-list">
								<a href="#"><img src="img/usb.png"/></a>
								<a href="#"><img src="img/card.png"/></a>
						</div>
					</div>
				</div>
				<p>---- 我是有底线的 ----</p>
			</main>
		</div>
		<!--底部-->
			<footer>
				<ul>
					<li class="icon-home-active"><a href="#">首页</a></li>
					<li class="icon-category"><a href="category.html">分类</a></li>
					<li class="icon-cart"><a href="cart.html">购物车</a></li>
					<li class="icon-my"><a href="my.html">我的</a></li>
				</ul>
			</footer>

	</body>
</html>
